import routes from '@/router';
import { useRoutes } from 'react-router-dom';
import { Suspense, useEffect, useState } from 'react';

import AppHeader from './components/app-header';
import AppFooter from './components/app-footer';
import BackToTop from './components/back-to-top';
import Playerbar from './views/player/playerbar';
import { useAppDispatch } from './store/hooks';
import { fetchSongDetail } from './views/player/store/player';
import { fetchRankDetail } from './views/discover/c-components/ranking/store/rank';
import Login from './views/login';

function App() {
  const [open, setOpen] = useState(false);
  const dispatch = useAppDispatch();
  useEffect(() => {
    dispatch(fetchRankDetail(19723756));
    dispatch(fetchSongDetail({ ids: 1475596788, play: true }));
  }, []);
  return (
    <>
      <AppHeader
        setOpen={(val: boolean) => {
          setOpen(val);
        }}
      />
      <Suspense fallback="">{useRoutes(routes)}</Suspense>
      <AppFooter />
      <Login
        open={open}
        setOpen={(val: boolean) => {
          setOpen(val);
        }}
      ></Login>
      <Playerbar></Playerbar>
      <BackToTop></BackToTop>
    </>
  );
}

export default App;
